<template>
  <div class="pageWrap">
    <div class="m-header container">
      <b-img :src="require('../assets/img/m_header_bg.png')" fluid v-if="!$parent.isPc"/>
      <b-img :src="require('../assets/img/m_header_bg_pc.png')" class="no-h-h-center m-h-bg-pc" v-if="$parent.isPc"/>
      <b-img :src="require('../assets/img/icon_star.png')" class="animo-ele m-h-s land-star"/>
      <b-img :src="require('../assets/img/m_h_c1.png')" class="animo-ele m-h-cp1 h-center"/>
      <b-img :src="require('../assets/img/m_h_c2.png')" class="animo-ele m-h-cp2 h-center"/>
      <b-img :src="require('../assets/img/balloon2.png')" class="animo-ele m-h-bl growUp"/>
      <b-img :src="require('../assets/img/cloud.png')" class="animo-ele m-h-c1"/>
      <b-img :src="require('../assets/img/cloud.png')" class="animo-ele m-h-c2"/>
    </div>
    <b-container class="measure-wrap">
          <b-img :src="require('../assets/img/cloud.png')" class="animo-ele m-b-c1"/>
          <b-img :src="require('../assets/img/cloud.png')" class="animo-ele m-b-c2"/>
          <b-img :src="require('../assets/img/icon_star.png')" class="animo-ele m-b-s1 land-star"/>
          <b-img :src="require('../assets/img/icon_star.png')" class="animo-ele m-b-s2 land-star"/>
          <b-img :src="require('../assets/img/icon_star.png')" class="animo-ele m-b-s3 land-star"/>
          <b-img :src="require('../assets/img/icon_star.png')" class="animo-ele m-b-s4 land-star"/>

          <b-form @submit="onSubmit" @reset="onReset" class="measure-form">
            <b-row>
              <b-col sm="6">
                <b-row>
                  <b-col sm="12">
                    <b-form-group>
                      <b-img :src="require('../assets/img/icon_name.png')" class="input-pre-name v-center animo-ele"/>
                      <b-form-input
                              type="text"
                              v-model="form.name"
                              required
                              placeholder="宝宝姓名">
                      </b-form-input>

                    </b-form-group>

                    <b-form-group>
                      <b-button-group class="full-w">
                        <b-img :src="require('../assets/img/icon_male.png')" class="input-pre-male v-center animo-ele"/>
                        <b-button class="half-w gender-picker m" :class="[form.gender==0?'selected':'']" @click="pickerGender(0)">男</b-button>
                        <b-img :src="require('../assets/img/icon_female.png')" class="input-pre-female v-center animo-ele"/>
                        <b-button class="half-w gender-picker f" :class="[form.gender==1?'selected':'']" @click="pickerGender(1)">女</b-button>
                      </b-button-group>
                    </b-form-group>

                    <b-form-group class="form-age-wrap">
                      <b-row>
                        <b-col cols="6">
                          <b-img :src="require('../assets/img/icon_tree.png')" class="input-pre-age v-center animo-ele"/>
                          <b-form-input
                                  type="tel"
                                  v-model="form.age"
                                  required
                                  placeholder="宝宝年龄"
                                  maxlength = "3"
                          >
                          </b-form-input>
                        </b-col>
                        <b-col cols="6">
                          <div class="pre no-h-v-center">岁</div>
                          <b-form-input class="text-align-center"
                                  type="tel"
                                  v-model="form.month"
                                  required
                                  maxlength = "2"
                          >
                          </b-form-input>
                          <!--<b-form-select v-model="form.month" :options="m_options"/>-->
                          <!--<b-form-input
                                  type="number"
                                  v-model="form.month"
                                  required>
                          </b-form-input>-->
                          <div class="append no-h-v-center">月</div>
                        </b-col>
                      </b-row>
                    </b-form-group>

                  </b-col>
                </b-row>

              </b-col>
              <b-col sm="6">
                <b-row>
                  <b-col cols="12">
                    <b-form-group>
                      <b-row>
                        <b-col cols="6">
                          <b-img :src="require('../assets/img/icon_father.png')" class="input-pre-father v-center animo-ele"/>
                          <b-form-input
                                  type="tel"
                                  v-model="form.father"
                                  required
                                  placeholder="爸爸身高"
                                  maxlength = "3"
                          >
                          </b-form-input>
                          <div class="append-cm animo-ele no-h-v-center">CM</div>
                        </b-col>
                        <b-col cols="6">
                          <b-img :src="require('../assets/img/icon_mother.png')" class="input-pre-mother v-center animo-ele"/>
                          <b-form-input
                                  type="tel"
                                  v-model="form.mother"
                                  placeholder="妈妈身高"
                                  required
                                  maxlength = "3"
                          >
                          </b-form-input>
                          <div class="append-cm no-h-v-center animo-ele">CM</div>
                        </b-col>
                      </b-row>
                    </b-form-group>

                    <b-form-group class="form-height-wrap">
                      <b-img :src="require('../assets/img/icon_baby.png')" class="input-pre-baby v-center animo-ele"/>
                      <b-form-input
                              type="tel"
                              v-model="form.expectation"
                              required
                              placeholder="对宝宝期望身高"
                              maxlength = "3"
                      >
                      </b-form-input>
                      <div class="append-cm no-h-v-center animo-ele">CM</div>
                    </b-form-group>
                  </b-col>
                </b-row>
              </b-col>
            </b-row>
            <Button class="show-res" :callback="onSubmit" trackname="submit_data"> 查看测试结果</Button>
            <div class="measure-desc">
              注：遗传身高/靶身高测算方法参考文献：蒋竞雄, 王燕, 连光利. 儿童体格生长评价及身高保健方法[J]. 中国儿童保健杂志, 2012, 20(11):963-965.
            </div>

          </b-form>
      <b-img :src="require('../assets/img/m_left_leaf.png')" class="animo-ele m-l-l"/>
      <b-img :src="require('../assets/img/m_right_leaf.png')" class="animo-ele m-l-r"/>
      <b-img :src="require('../assets/img/m_bottom_leaf.png')" class="animo-ele m-l-b"/>
      <!--<img :src="require('../assets/img/m_bottom_leaf.png')" class="animo-ele m-l-b"/>-->
    </b-container>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import Utils from '../mixins/utils.js';
export default {
  name: 'Measure',
  mixins:[Utils],
  mounted(){
    this.trackPageview('/Measure');
  },
  computed:{
        m_options(){
                let opt = [];
                for(let i =1;i<13;i++){
                  opt.push({
                    value:i,
                    text:i
                  });
                }
                return opt;
        },
      targetHeight(){
          let dif = 13;
          if(this.form.gender === 1 ){
            dif = -13;
          }
         return ((parseInt(this.form.father)+parseInt(this.form.mother))+dif)/2 ;
      }
  },
  data () {
    return {
        form: {
          name:'',
          age:'',
          month:'',
          father:'',
          mother:'',
          gender:0,
          expectation:'',
          target:null
        },
        /*form: {
          name:'ray',
          age:'1',
          month:'1',
          father:'170',
          mother:'180',
          gender:0,
          expectation:'185',
          target:null
        },*/
    }
  },
  methods:{
    pickerGender(gender){
      this.form.gender = gender;
    },
    onSubmit(data){
        if(!this.form.name || (!this.form.age && !this.form.month) || !this.form.expectation || !this.form.father || !this.form.mother ){
            this.$store.commit('showErrorMsg','啊欧，似乎还有信息没填写完全哦！');
            return false;
        }

        if(!this.validator(this.form.name,'name')){
            this.$store.commit('showErrorMsg','姓名不能为空或包含特殊字符和数字');
            return false;
        }
        if(this.form.month > 12 || this.form.month <1){
            this.$store.commit('showErrorMsg','请填写正确的月龄');
            return false;
        }
        if(this.form.age > 10){
            this.$store.commit('showErrorMsg','抱歉，本测试仅适用于1~10岁的宝宝。欢迎关注雅培妈妈荟公众号，了解更多育儿资讯。');
            return false;
        }
        if(this.form.age < 1){
            this.$store.commit('showErrorMsg','本测试适用于1~10岁的宝宝，等宝宝长大一些再来测一测吧！');
            return false;
        }

        if(this.form.expectation < 140 || this.form.expectation > 230){
            this.$store.commit('showErrorMsg','宝宝期望身高超出正常范畴，请正确填写信息哦！');
            return false;
        }

        this.form.target = this.targetHeight;
        this.$store.dispatch({
            type: "recordData",
            data: this.form,
        });

        this.$router.push('/result');
       /*this.$http.post('/api/user/addUser',{
              'formData':this.form
          }).then(response => {

      }, response => {

      });
      return false;*/
    },
    onReset(){

    },
  }
}
</script>

<style lang="scss" scoped>
  .pageWrap{
      background-color:#f8f2f8;
      position: absolute;
      width: 100%;
      overflow:hidden;
  }
  .measure-wrap{
    padding-bottom:150px;
    position: relative;
    overflow:hidden;
    .m-b-c1{
        top:20px;
        left:-350px;
        width:300px;
    }
    .m-b-c2{
      top:150px;
      right:-310px;
      width:240px;
    }
    .m-b-s1{
      left:-500px;
      width:40px;
    }
    .m-b-s2{
      top:500px;
      left:-100px;
    }
    .m-b-s3{
      top:-250px;
      right:-400px;
    }
    .m-b-s4{
      width:40px;
      top:0px;
      right:-100px;
    }
  }
  .m-header{
      padding:0;
      .m-h-s{
        width:39px;
        top:30px;
        right:150px;
      }
      .m-h-c1{
        width:184px;
        z-index: 1;
        top:0px;
        left:-60px;
        opacity:.6;
        top:40px;
      }
      .m-h-c2{
        width:124px;
        z-index: 1;
        right:10px;
        opacity:2;
        top:155px;

      }
    .m-h-cp1{
      top:85px;
      width:344px;
    }
    .m-h-cp2{
      top:165px;
      width:388px;
    }
    .m-h-bl{
      width:66px;
      right:70px;
      top:125px;
      z-index:1;
    }
  }
  .m-l-l{
    left:-20px;
    width:94px;
    bottom:80px;
  }
  .m-l-r{
    right:-20px;
    width:90px;
    bottom:80px;
  }
  .m-l-b{
    right:20px;
    width:141px;
    bottom:-110px;
  }
  .show-res{
    margin-top:70px;
  }
  .m-h-bg-pc{
    position:relative;
  }
  .measure-desc{
    width: 600px;
    margin: 60px auto 0;
    color:#945eb0;
    font-size: 22px;
    text-align:center
  }
  @media (min-width: 576px){
    .measure-wrap{
      overflow:visible;
    }
    .m-header{
      .m-h-s{
        width:42px;
        right:450px;
      }
      .m-h-c1{
          left:0px;
          width:255px;
      }
      .m-h-c2{
        right:200px;
        width:174px;
      }
      .m-h-cp1{
        top:120px;
      }
      .m-h-cp2{
        width: 348px;
        top:200px;
      }
      .m-h-bl{
        right:200px;
        width:105px;
      }
    }

    .m-l-l{
      //display:none;
      transform:rotate(-25deg);
      bottom:5px;
      left:20px;
    }
    .m-l-r{
      z-index: 3;
      bottom:-20px;
      transform:rotate(45deg);
      right:20px;
      //display:none;
    }
    .m-l-b{
      //display:none;
      bottom:-40px;
      right:100px;
    }
    .measure-desc{
      width: 950px;
    }
  }
  
</style>
